<template>
  <sn-row-has-four-col
      v-if="downInfo"
      :one="3"
      :two="12"
      :three="5"
      :four="4">
    <div slot="one-col" style="min-height: 36px"></div>
    <div slot="two-col" class="down-info">
      <movie-breadcrumb
          :movie-name="movieInfo.movieName"
          class="margin-top-20"/>
      <cast-nav v-if="downInfo"/>
      <router-view/>
    </div>
  </sn-row-has-four-col>
</template>

<script>
import MovieBreadcrumb from "@/views/movie/movie_detail/down_info/nav/MovieBreadcrumb";
import CastNav from "@/views/movie/movie_detail/down_info/nav/CastNav";

export default {
  name: "DownInfo",
  components: {
    MovieBreadcrumb,
    CastNav
  },
  data() {
    return {
      movieInfo: {
        movieName: ''
      }
    }
  },
  props: {
    downInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    getDownInfo() {
      this.movieInfo.movieName = this.downInfo.movieName
    }
  },
  created() {
    this.getDownInfo()
  }
}
</script>

<style scoped>
.down-info {
  margin-top: 70px;
}
</style>